<template>
  <div class="bor">
  <div class="phoneList">
    <div style="left: 232px" >
    <ul v-for="(item,i) in xiaoMiList" :key="i">
      <router-link :to="`/ShoppingCart?id=${item.prod_id}`">
      <li >
        <img :src="item.prod_pic">
        <a href="#"><span>{{item.prod_title}}</span></a>
        <a href="#"><span class="red2">{{item.prod_price_current}}元</span></a>
      </li>
      </router-link>
    </ul>
    </div>
  </div>
    </div>
</template>

<script>
export default {
  props:['xiaoMiList','picture'],
  name: 'headerContext',
  data() {
    return {
      children: false,
    }
  },
  methods:{
    childrenHover() {
      this.children = true
    },
    childrenLeave() {
      this.children = false
    }
  }
}
</script>

<style scoped>
.phoneList{
  background-color: white;
  z-index: 1000;
  position:absolute;
  height: 180px;
  left: 0px;
  top:163px;
  width:1857px;
  font-size: 12px;
  border: 1px solid #e0e0e0;
}

.phoneList a{
  display: block;
  padding-top: 1px;
  padding-left: 45px;
  text-decoration: none;
}
.red2{
  color: red;
}
ul{
  padding-left: 323px;
}
 li {
   float: left;
  padding-top: 8px;
  padding-left:15px;
  list-style: none;
}
</style>
